<template>
  <div class="user-model">
    <div class="user-list">
      <div class="search-box">
        <div class="labelName lf">用户ID：</div>
        <el-input class="elInput lf" v-model="user_id"></el-input>
        <div class="labelName lf">用户昵称：</div>
        <el-input class="elInput lf" v-model="nick_name"></el-input>
        <el-button class="lf" type="primary" @click="searchData()">查询</el-button>
        <el-button class="lf" type="primary" @click="sendStars()">发放星星</el-button>
      </div>
      <ul class="tab-nav">
        <li class="tab-nav-item" v-for="(item,index) in tabList" :key="item.id" @click="switchTab(index)">{{item.text}}</li>
        <!-- <li class="tab-nav-item" @click="switchUser(0)">玩购星球</li> -->
        <div class="line" ref='line'></div>
      </ul>
      <div class="table-box">
        <el-table :data="userList" @selection-change="clickRow" @sort-change="onSortChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="用户ID" prop="user_id">
          </el-table-column>
          <el-table-column label="用户昵称" prop="user_name">
          </el-table-column>
          <el-table-column label="抓商品次数" prop="catch_goods" sortable="custom"></el-table-column>
          <el-table-column label="抓中商品数" prop="catched_goods" sortable="custom"></el-table-column>
          <el-table-column label="换购商品数" prop="change_purchase_goods" sortable="custom"></el-table-column>
          <el-table-column label="兑换商品数" prop="exchange_goods" sortable="custom"></el-table-column>
          <el-table-column label="交易金额" prop="business_money" sortable="custom"></el-table-column>
          <el-table-column label="总星星" prop="total_stars" sortable="custom"></el-table-column>
          <el-table-column label="实付金额" prop="consume_money" sortable="custom"></el-table-column>
          <el-table-column label="消耗星星" prop="cosume_stars" sortable="custom"></el-table-column>
          <el-table-column label="剩余星星" prop="stars" sortable="custom"></el-table-column>
          <el-table-column width="130" label="最后登录时间" prop="last_login_time" sortable="custom"></el-table-column>
          <el-table-column label="注册时间" prop="add_time" sortable="custom"></el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="pageSizeArray"
          :page-size="per_page"
          layout="sizes, prev, pager, next"
          :total="total_count">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="发放列表" :visible.sync="dialogTableVisible" width="1500px">
      <el-form :model="form">
        <el-form-item label="发放星星数量" :label-width="formLabelWidth">
          <el-input v-model="form.stars" auto-complete="off" style="width:220px;"></el-input>
          <el-button style="width:100px;margin-left: 20px;" type="primary" @click="sendStarsSubmit()" >发放星星</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="userArr">
        <el-table-column label="用户ID" prop="user_id">
        </el-table-column>
        <el-table-column label="用户昵称" prop="user_name">
        </el-table-column>
        <el-table-column label="抓商品次数" prop="catch_goods" sortable="custom"></el-table-column>
        <el-table-column label="抓中商品数" prop="catched_goods" sortable="custom"></el-table-column>
        <el-table-column label="换购商品数" prop="change_purchase_goods" sortable="custom"></el-table-column>
        <el-table-column label="兑换商品数" prop="exchange_goods" sortable="custom"></el-table-column>
        <el-table-column label="交易金额" prop="business_money" sortable="custom"></el-table-column>
        <el-table-column label="总星星" prop="total_stars" sortable="custom"></el-table-column>
        <el-table-column label="实付金额" prop="consume_money" sortable="custom"></el-table-column>
        <el-table-column label="消耗星星" prop="cosume_stars" sortable="custom"></el-table-column>
        <el-table-column label="剩余星星" prop="stars" sortable="custom"></el-table-column>
        <el-table-column width="130" label="最后登录时间" prop="last_login_time" sortable="custom"></el-table-column>
        <el-table-column label="注册时间" prop="add_time" sortable="custom"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentType: 1,
      sc_name: "", //排序的字段
      sc: "", //升序或者是降序
      currentPage: 1, //当前的页面
      per_page: 10,
      pageSizeArray: PageSizeArray,
      total_count: 0,
      userArr: [], //选中的用户列表
      userList: [],
      user_id: "", //用户ID
      nick_name: "", //用户昵称
      dialogTableVisible: false,
      tabList: [
        {
          id: 0,
          text: "玩购说"
        },
        {
          id: 1,
          text: "玩购星球"
        }
      ],
      form: {
        stars: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    //排序
    onSortChange(data) {
      this.sc_name = data.prop;
      //判断升序降序
      if (data.order === "ascending") {
        this.sc = "asc";
      } else {
        this.sc = "desc";
      }
      this.getUserList(this.currentType);
    },
    //切换页面
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getUserList(this.currentType);
    },

    //分页 每页条数切换
    handleSizeChange(data) {
      this.per_page = data;
      this.getUserList(this.currentType);
    },

    //点击查询
    searchData() {
      this.currentPage = 1;
      this.getUserList(this.currentType);
    },
    //点击选择行数据
    clickRow(row) {
      this.userArr = row;
      this.userArr.sort(function(a, b) {
        if (a.add_time > b.add_time) {
          return -1;
        } else {
          return 1;
        }
      });
    },
    //获取用户列表
    getUserList(platform) {
      let formData = new FormData();
      formData.append("page", this.currentPage);
      formData.append("sc_name", this.sc_name);
      formData.append("sc", this.sc);
      platform == 1 ? formData.append("backend_type", 0) :formData.append("backend_type", 2)
      if (this.nick_name) {
        formData.append("nick_name", this.nick_name);
      }
      if (this.user_id) {
        formData.append("user_id", this.user_id);
      }
      if (this.per_page) {
        formData.append("per_page", this.per_page);
      }
      this.$http(
        "/wgl_admin/index.php?app=member&act=index",
        "post",
        {},
        {},
        formData,
        success => {
          this.userList = success.data.list;
          this.total_count = success.data.total_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    //发放星星
    sendStars() {
      if (this.userArr.length == 0) {
        this.$message.error("请先选择发放用户！");
        return;
      }
      this.form.stars = "";
      this.dialogTableVisible = true;
    },
    //确认发放星星
    sendStarsSubmit() {
      if (!this.form.stars) {
        this.$message.error("请填写发放星星数量！");
        return;
      }
      var formData = new FormData();
      var user_ids = "";
      this.userArr.forEach(val => {
        if (user_ids == "") {
          user_ids = val.user_id;
        } else {
          user_ids += "," + val.user_id;
        }
      });
      formData.append("user_ids", user_ids);
      formData.append("stars", this.form.stars);
      this.$http(
        "/wgl_admin/index.php?app=member&act=hand_out_star",
        "post",
        {},
        {},
        formData,
        success => {
          this.$message.success("发放成功");
          this.dialogTableVisible = false;
          this.getUserList(this.currentType);
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    // 切换导航
    switchTab(index) {
      let fIndex = index;
      this.currentType = fIndex == 1 ? 2 : 1;
      this.$refs.line.style.left = fIndex * 50 + "%";
      this.$refs.line.style.transition = `all 0.3s linear`;
      this.user_id = ''
      this.nick_name = ''
      switch (this.currentType) {
        case 1:
          this.getUserList(this.currentType);
          break;
        case 2:
          this.getUserList(this.currentType);
          break;
      }
    }
  },
  created() {
    this.getUserList(this.currentType);
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.user-model {
  /*padding-left: 118px;*/
  .user-list {
    padding: 30px 56px 30px 50px;
    .search-box {
      border: 1px solid #e6e8f4;
      max-width: 1453px;
      min-width: 600px;
      width: 100%;
      height: 90px;
      padding: 25px 30px;
      .elInput {
        display: block;
        width: 150px;
        font-size: 12px;
        color: #333;
        margin-right: 20px;
      }
      .labelName {
        height: 40px;
        line-height: 40px;
        color: #333;
        font-size: 14px;
      }
    }
    .table-box {
      // max-width: 1466px;
      width: 100%;
      // margin-top: 48px;
    }
  }
}
.tab-nav {
  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 10px 0;
  &-item {
    display: inline-block;
    width: 100px;
    text-align: left;
    &:hover {
      cursor: pointer;
    }
  }
  .line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: #3f87f5;
  }
}
.pagination {
  width: 1466px;
  text-align: right;
  margin-top: 46px;
}
</style>
